<template>
  <view class="router-tabs">
    <view
      class="router-tabs-item"
      v-for="(item, index) in list"
      :key="index"
      @click="handleChangeRoute(index)"
      :class="{
        active: index === current,
      }"
    >
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "RouterTabs",
  props: {
    current: Number,
    list: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.getCurrentPageRoute();
  },
  data() {
    return {
      currentRoute: "",
    };
  },
  methods: {
    getCurrentPageRoute() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      this.currentRoute = currentPage.route;
      console.log("当前页面路由地址:", this.currentRoute);
    },
    handleChangeRoute(index) {
      const url = this.list[index].url;
      if (!url) {
        this.$emit("change", index);
      } else {
        if (url === this.currentRoute) return;
        uni.navigateTo({
          url: url,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./RouterTabs.scss";
</style>